<template>
	<view class="waybill" :class="popupShow ? 'tl-show': ''">
		<view class="box_tops">
			<view class="head_nav">
				<view class="vis" v-for="(item,index) in ifys" :key="index" @click="navqh(item,index)">
					{{item.name}}
					<view v-if="ifyid == item.id"></view>
				</view>
			</view>
		</view>
		<view class="lis_ul">
			<view class="lis_li" v-for="(item,index) in list" :key="index">
				<view class="tops">
					<view>订单号：{{item.order_number}}</view>
					<view v-if="item.loading_and_unloading_type == 1 && ifyid == 3">待装车</view>
					<view v-if="item.loading_and_unloading_type == 2 && ifyid == 3">待卸车</view>
					<view v-if="item.loading_and_unloading_type == 1 && ifyid == 2">装车完成</view>
					<view v-if="item.loading_and_unloading_type == 2 && ifyid == 2">卸车完成</view>
				</view>
				<view class="cont">
					<view class="vis">
						<view>{{item.contacts}}</view>
						<view>雇主</view>
					</view>
					<view class="vis">
						<view>{{item.price}}</view>
						<view>单价</view>
					</view>
					<view class="vis">
						<view><span v-if="ifyid == 1">约</span>{{item.number}}</view>
						<view>数量(斤)</view>
					</view>
				</view>
				<view class="bots">
					<view>联系方式：{{item.ptelephone}}</view>
					<view v-if="ifyid == 2">总价：{{item.payment_amount}}</view>
				</view>
				<view class="bots">
					<view v-if="item.loading_and_unloading_type == 1">装车时间：{{item.takes_time}}</view>
					<view v-if="item.loading_and_unloading_type == 2">卸车时间：{{item.takes_time}}</view>
				</view>
				<view class="bots">
					<view style="width: 95%;" v-if="item.loading_and_unloading_type == 1">装车地址：{{item.remarks}}</view>
					<view style="width: 95%;" v-if="item.loading_and_unloading_type == 2">卸车地址：{{item.remarks}}</view>
				</view>
				<view class="buts" v-if="ifyid == 1">
					<view @click.stop="phone(item.ptelephone)">立即联系</view>
					<view @click="newProject(item)">修改单价数量</view>
				</view>
			</view>
			<view class="list_bots" v-if="showLoadMore">{{loadMoreText}}</view>
		</view>
		
		<view class="masklayer" v-if="popupShow">
			<view class="masks" @click="newProject({})"></view>
			<view class="popups">
				<view class="titles">完成订单</view>
				<view class="inp_li">
					<view class="txt">
						单价:
					</view>
					<view class="inps">
						<!--  @blur="searchsLose" -->
						<uni-easyinput type="number" :clearable="false" :inputBorder="false" v-model="price" placeholder="请输入单价"></uni-easyinput>
						<span>元</span>
					</view>
				</view>
				<view class="inp_li">
					<view class="txt">
						重量:
					</view>
					<view class="inps">
						<uni-easyinput type="number" :clearable="false" :inputBorder="false" v-model="number" placeholder="请输入重量"></uni-easyinput>
						<span>斤</span>
					</view>
				</view>
				
				<view class="butts">
					<view @click="newProject({})">取消</view>
					<view @click="notarizeFn">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { queryPorterAll,updateNumber } from '@/utils/api.js';
	export default {
		data() {
			return {
				// 防止触发重复点击
				noClick:true,
				id:0,
				
				// 分类id
				ifyid:1,
				// 分类下标
				ifyindex:0,
				// 分类列表
				ifys:[
					{
						id:1,
						name:'进行中'
					},{
						id:2,
						name:'已完成'
					}
				],
				
				// 订单数据
				list:[],
				loadMoreText: "加载中...",
				showLoadMore: false,
				// 最大值
				max: 5,
				// 页数
				current:1,
				// 每页数量
				pageSize:10,
				
				// 点击完成的订单
				popupShow:false,
				orderData:{},
				price:'',
				number:'',
				
			}
		},
		computed:{
			
		},
		onShow(){
			
		},
		onLoad(e) {
			// console.log(e);
			this.id=e.id
			this.initData();
		},
		// 监听页面卸载
		onUnload() {
			this.max = 0,
			this.list = [],
			this.loadMoreText = "加载更多",
			this.showLoadMore = false;
			this.current=1,
			this.pageSize=10
		},
		// 页面滚动到底部的事件
		onReachBottom() {
			console.log("onReachBottom");
			if (this.loadMoreText=='没有更多订单了!') {
				this.loadMoreText = "没有更多订单了!"
				return;
			}
			this.showLoadMore = true;
			this.current+=1
			setTimeout(() => {
				this.setListData();
			}, 300);
		},
		// 监听用户下拉动作，一般用于下拉刷新
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.list = []
			this.loadMoreText = "加载更多"
			this.showLoadMore = false
			this.current=1
			this.pageSize=10
			this.initData();
		},
		methods: {
			// 切换
			navqh(item,index){
				this.ifyid=item.id
				this.list = []
				this.loadMoreText = "加载更多"
				this.showLoadMore = false
				this.current=1
				this.pageSize=10
				this.initData();
			},
			// 获取搬运工数据
			initData(){
				// 获取搬运工数据
				queryPorterAll({
					current:this.current,
					pageSize:this.pageSize,
					porterId:this.id,
					orderStatus:this.ifyid
				}).then((res) => {
				    if (res.code === 200) {
						// console.log(res);
						this.list=res.data
						if(this.list.length < 10){
							this.showLoadMore = true;
							this.loadMoreText = "没有更多订单了!"
						}
						uni.stopPullDownRefresh();
				    } else {
						uni.showToast({title:"请求错误", position: 'bottom'})
				    }
				}).catch((err) => {
						uni.showToast({title:'网络繁忙', position: 'bottom'})
				});
			},
			// 下拉加载数据
			setListData() {
				let data = [];
				// 获取店铺数据
				queryPorterAll({
					current:this.current,
					pageSize:this.pageSize,
					porterId:this.id,
					orderStatus:this.ifyid
				}).then((res) => {
				    if (res.code === 200) {
				      // console.log(res);
					  data=res.data
					  if(data.length == 0){
					  		this.current-=1
					  		this.showLoadMore = true;
					  		this.loadMoreText = "没有更多订单了!"
					  		return
					  }else if(data.length < 10){
					  	this.showLoadMore = true;
					  	this.loadMoreText = "没有更多订单了!"
					  }
					  this.list = this.list.concat(data);
				    } else {
				      uni.showToast({title:"请求错误", position: 'bottom'})
				    }
				}).catch((err) => {
					uni.showToast({title:'网络繁忙', position: 'bottom'})
				});
			},
			// 拨打电话
			phone(contacts) {
				const res = uni.getSystemInfoSync();
				// ios系统默认有个模态框
				if(res.platform == 'android'){
					// 安卓手机手动设置一个showActionSheet
					uni.showActionSheet({
						itemList: [contacts,'呼叫'],
						success:function(res){
							// console.log(res);
							if(res.tapIndex==1){
								uni.makePhoneCall({
									phoneNumber: contacts.toString(),
									success(ress) {
										// console.log("拨打电话成功",ress)
									},
									fail(err) {
										uni.showToast({title:"拨打电话失败，稍后再拨", position: 'bottom',icon:'none'})
									}
								})
							}
						},fail(err) {
							// uni.showToast({title:"拨打电话失败，稍后再拨", position: 'bottom',icon:'none'})
						}
					})
					
				}
			},
			// 遮罩层显示隐藏
			newProject(item){
				this.orderData=item
				this.popupShow=!this.popupShow
				if(this.popupShow){
					this.price=this.orderData.price
					this.number=this.orderData.number
				}else{
					this.price=''
					this.number=''
				}
			},
			//失去焦点
			searchsLose(e){
				console.log(e);
			},
			// 确认订单
			notarizeFn(){
				updateNumber({
					orderNumber:this.orderData.order_number,
					price:this.price,
					number:this.number
				}).then((res) => {
				    if (res.code === 200) {
						uni.showToast({title:"单价数量修改成功", position: 'bottom',icon:'none'})
						this.list = []
						this.loadMoreText = "加载更多"
						this.showLoadMore = false
						this.current=1
						this.pageSize=10
						this.initData();
						this.newProject({})
				    } else {
						uni.showToast({title:"请求错误", position: 'bottom',icon:'none'})
				    }
				}).catch((err) => {
					uni.showToast({title:'网络繁忙', position: 'bottom',icon:'none'})
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.waybill{
		.box_tops{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			// padding-top: 45px;
			.head_nav{
				background-color: #f5f5f5;
				height: 50px;
				font-size: 14px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: $mainText;
				line-height: 50px;
				display: flex;
				align-items: center;
				justify-content: space-around;
				.vis{
					height: 50px;
					position: relative;
					view{
						width: 20px;
						height: 2px;
						background: linear-gradient(232deg, #B9D378 0%, #1B9A5D 100%);
						border-radius: 3px;
						position: absolute;
						left: 15%;
						bottom: 20%;
					}
				}
			}
		
		}
		.lis_ul{
			padding: 10px;
			padding-top: 50px;
			.lis_li{
				// height: 120px;
				background: #FFFFFF;
				border-radius: 10px;
				padding: 10px;
				margin-bottom: 10px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.tops{
					display: flex;
					justify-content: space-between;
					font-size: 15px;
					font-family: PingFangSC-Regular, PingFang SC;
					line-height: 20px;
					font-weight: 400;
					view:nth-child(1){
						color: $mainText;
					}
					view:nth-child(2){
						color: #2EA167;
					}
				}
				.cont{
					padding: 10px 0;
					display: flex;
					justify-content: space-between;
					.vis{
						width: 25%;
						display: flex;
						flex-direction: column;
						align-items: center;
						view:nth-child(1){
							font-size: 18px;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 600;
							color: $mainText;
							line-height: 25px;
						}
						view:nth-child(2){
							font-size: 15px;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: $text;
							line-height: 21px;
						}
					}
				}
				.bots{
					display: flex;
					justify-content: space-between;
					font-size: 15px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: $text;
					line-height: 30px;
					view:nth-child(1){
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
					}
				}
				.buts{
					padding-top: 10px;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					view{
						// width: 80px;
						padding: 0 10px;
						height: 30px;
						background: #F6F6F6;
						border-radius: 25px;
						font-size: 15px;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 600;
						color: #098341;
						line-height: 30px;
						text-align: center;
						margin: 0 10px;
					}
				}
			}
			.list_bots{
				font-size: 16px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: $mainText;
				line-height: 30px;
				text-align: center;
			}
		}
		.masklayer{
			position:fixed;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			// background:rgba(0,0,0,0.5);
			z-index: 110;
			display: flex;
			align-items: center;
			justify-content: center;
			.masks{
				height: 100%;
				width: 100%;
				background:rgba(0,0,0,0.5);
				z-index: 110;
				position:fixed;
				top: 0;
				left: 0;
			}
			.popups{
				width: 550rpx;
				height: 400rpx;
				background: #FFFFFF;
				border-radius: 10px;
				z-index: 111;
				padding: 40rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.titles{
					font-size: 15px;
					font-weight: 600;
					color: $mainText;
					line-height: 21px;
					text-align: center;
				}
				.inp_li{
					display: flex;
					.txt{
						font-size: 15px;
						font-weight: 600;
						color: $mainText;
						line-height: 100rpx;
						margin-right: 10px;
					}
					.inps{
						-webkit-flex: 1;
						flex: 1;
						height: 100rpx;
						background: #F6F6F6;
						border-radius: 10px;
						font-size: 15px;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: $mainText;
						line-height: 100rpx;
						display: flex;
						span{
							padding: 0 10px;
						}
						::v-deep .uni-easyinput{
							.uni-easyinput__content{
								min-height: 100rpx;
								.uni-easyinput__content-input{
									.uni-easyinput__placeholder-class{
										font-size: 15px;
										font-family: PingFangSC-Regular, PingFang SC;
										font-weight: 400;
										color: #999999;
										line-height: 100rpx;
									}
									.uni-input-input{
										font-size: 15px;
										font-family: PingFangSC-Regular, PingFang SC;
										font-weight: 400;
										color: $mainText;
										line-height: 100rpx;
									}
								}
							}
						}
					}
				}
				
				.butts{
					display: flex;
					justify-content: space-between;
					view{
						width: 240rpx;
						height: 80rpx;
						background: #F6F6F6;
						border-radius: 25px;
						font-size: 15px;
						font-weight: 500;
						color: #098341;
						line-height: 80rpx;
						text-align: center;
					}
					view:nth-child(1){
						color: #FF0000;
					}
				}
			}
		}
	}
	.tl-show{
	  overflow: hidden;
	  position:fixed;
	  height: 100%;
	  width: 100%;
	}
</style>
